<template>
  <div class="right-drawer column fit">
    <div class="row justify-between items-center q-mx-md q-mt-md">
      <div class="preview-label q-my-sm" :style="`color:${rightDrawerColor}`">
        PREVIEW
      </div>
      <q-btn dense flat icon="mdi-close" color="sub" @click="close" />
    </div>
    <q-scroll-area class="fit col" v-if="rightDrawerContent">
      <div class="column q-pa-md">
        <div class="video-container" v-if="contentType == 'Video'">
          <VideoCard
            class="fit"
            :video="(rightDrawerContent as Video)"
            :translator="false"
          />
        </div>
        <div class="video-container" v-else-if="contentType == 'Audio'">
          <template v-if="videoInAudio">
            <VideoCard class="fit" :video="videoInAudio" :translator="true" />
          </template>
        </div>
        <div v-else class="column">
          <div class="playlist-title">{{ rightDrawerContent.title }}</div>
          <div class="row justify-between items-center q-my-md">
            <div class="row items-center">
              <q-avatar size="34px" class="q-mr-sm">
                <q-img :src="rightDrawerContent.coverImage" />
              </q-avatar>
              <div>{{ rightDrawerContent.creatorName }}</div>
            </div>
            <q-icon
              style="width: 32px; height: 32px; font-size: 2em"
              name="mdi-earth"
            />
          </div>
          <div class="playlist-description text-sub three-line-text">
            {{ rightDrawerContent.description }}
          </div>
          <div class="row justify-between items-center q-my-md">
            <div class="text-sub">
              {{ (rightDrawerContent as any).numContents }} Videos
            </div>
            <q-btn dense flat round icon="mdi-sort-variant" color="sub">
              <q-menu auto-close>
                <q-list dense>
                  <q-item clickable @click="playlistSortBy(1)">
                    <q-item-section>Date added (newest)</q-item-section>
                  </q-item>
                  <q-item clickable @click="playlistSortBy(2)">
                    <q-item-section>Date added (oldest)</q-item-section>
                  </q-item>
                  <q-item clickable @click="playlistSortBy(3)">
                    <q-item-section>Most popular</q-item-section>
                  </q-item>
                  <q-item clickable @click="playlistSortBy(4)">
                    <q-item-section>Date published (newest)</q-item-section>
                  </q-item>
                  <q-item clickable @click="playlistSortBy(5)">
                    <q-item-section>Date published (oldest)</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
          <div class="column q-gutter-y-sm">
            <template
              v-for="video in (rightDrawerContent as any).contents"
              :key="video.id"
            >
              <div class="row playlist-video-item">
                <q-img width="140px" height="80px" :src="video.coverImage" />
                <div class="q-ml-sm fit column col justify-around no-wrap">
                  <div class="video-title one-line-text">{{ video.title }}</div>
                  <div class="row">
                    <q-avatar style="width: 18px; height: 18px">
                      <q-img :src="video.creatorAvatar" />
                    </q-avatar>
                    <div
                      class="text-sub one-line-text q-ml-xs"
                      style="max-width: 80%"
                    >
                      {{ video.creatorName }} · {{ video.createTimeHuman }}
                    </div>
                  </div>
                  <div class="row items-center q-gutter-x-sm">
                    <h-icon-num icon="mdi-play" :label="video.viewCount" />
                    <h-icon-num
                      icon="mdi-star"
                      :label="video.complimentsCount"
                    />
                    <lang-chip
                      v-if="video.currentAudio"
                      :code="video.currentAudio?.langCode"
                    ></lang-chip>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="col">
          <template v-if="contentType == 'Video'">
            <div>
              <div class="row justify-between items-center q-my-sm">
                <q-input
                  bg-color="#101010"
                  color="accent"
                  rounded
                  dense
                  outlined
                  v-model="videoFilterString"
                  label="Search Linked Audio"
                >
                  <template v-slot:prepend>
                    <q-icon name="search" />
                  </template>
                </q-input>
                <div class="row">
                  <q-btn
                    dense
                    flat
                    round
                    :icon="showFilter ? 'mdi-filter-remove' : 'mdi-filter-menu'"
                    color="sub"
                    @click="showFilter = !showFilter"
                  />
                  <q-btn dense flat round icon="mdi-sort-variant" color="sub">
                    <q-menu auto-close>
                      <q-list dense>
                        <q-item clickable @click="videoSortBy(1)">
                          <q-item-section>Most recent</q-item-section>
                        </q-item>
                        <q-item clickable @click="videoSortBy(2)">
                          <q-item-section>Most poplar</q-item-section>
                        </q-item>
                        <q-item clickable @click="videoSortBy(3)">
                          <q-item-section>Most compliments</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-btn>
                </div>
              </div>
              <div v-if="showFilter" class="row">
                <q-space />
                <q-btn-dropdown no-caps flat dense label="Language" color="sub">
                  <q-list dense>
                    <q-item
                      clickable
                      v-close-popup
                      v-for="lang in (rightDrawerContent as any).languages"
                      :key="lang"
                    >
                      <q-item-section>
                        <q-item-label>{{ getLangCodeName(lang) }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
                <q-btn-dropdown
                  no-caps
                  flat
                  dense
                  label="Compliments"
                  color="sub"
                >
                  <q-list dense>
                    <q-item
                      clickable
                      v-close-popup
                      v-for="lang in complimentConfig"
                      :key="lang.id"
                    >
                      <q-item-section avatar style="min-width: 25px !important">
                        <q-avatar rounded size="22px">
                          <img :src="lang.normalImage" />
                        </q-avatar>
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>{{ lang.label }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </div>
              <div class="column q-gutter-y-sm">
                <div
                  class="translator-container row items-center justify-between no-wrap"
                  v-for="audio in (rightDrawerContent as any).audios"
                  :key="audio.id"
                >
                  <div class="row">
                    <q-avatar class="q-mx-sm" size="40px">
                      <img :src="audio.creatorAvatar" />
                    </q-avatar>
                    <div class="text-no-wrap">{{ audio.creatorName }}</div>
                  </div>
                  <div class="row">
                    <h-icon-num icon="mdi-play" :label="audio.playCount" />
                    <h-icon-num icon="mdi-star" :label="audio.starCount" />
                    <lang-chip :code="audio.langCode"></lang-chip>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else-if="contentType == 'Audio'">
            <div class="row justify-between q-my-md">
              <div class="text-sub">MY RECORDINGS</div>
              <q-btn
                dense
                flat
                round
                :icon="
                  audioSort
                    ? 'mdi-sort-clock-ascending-outline'
                    : 'mdi-sort-clock-descending-outline'
                "
                color="sub"
                @click="audioSort = !audioSort"
              ></q-btn>
            </div>
          </template>
        </div>
      </div>
    </q-scroll-area>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useGlobalStore } from 'stores/global-store';
import Video from 'src/models/Video';
import { ref, watch, nextTick } from 'vue';
import VideoCard from 'components/video/LargeVideoCard.vue';
import HIconNum from 'src/components/utils/HIconNum.vue';
import LangChip from 'src/components/LanguageChip.vue';
const {
  rightDrawerContent,
  languageConfig,
  complimentConfig,
  rightDrawerColor,
  showRightDrawer,
} = storeToRefs(useGlobalStore());
const contentType = ref('');
const videoFilterString = ref('');
const showFilter = ref(false);
const showLangFilter = ref(false);
const showComplimentFilter = ref(false);
const showVideoSorter = ref(false);
const videoLangFilter = ref('');
const videoComplimentFilter = ref('');
const videoSort = ref('');
const audioSort = ref(false);
const videoInAudio = ref<Video>();
watch(rightDrawerContent, async () => {
  if (rightDrawerContent!.value) {
    contentType.value = rightDrawerContent!.value.constructor.name;
  }
  showFilter.value = false;
  if (contentType.value === 'Audio') {
    // videoInAudio.value = await store.dispatch('VideoStore/getVideo', {
    //   videoId: (rightDrawerContent!.value as Audio).videoId,
    //   langCode: (rightDrawerContent!.value as Audio).langCode,
    // });
    nextTick(() => {
      if (
        videoInAudio.value!.filteredAudio &&
        videoInAudio.value!.filteredAudio.length > 0
      ) {
        videoInAudio.value!.currentAudio = videoInAudio.value!.filteredAudio[0];
      }
    });
  } else if (contentType.value === 'Playlist') {
  }
});
function getLangCodeName(code: string) {
  if (languageConfig.value.length > 0) {
    return languageConfig.value.find((lang) => lang.code === code)?.label;
  } else {
    return code;
  }
}
function close() {
  showRightDrawer.value = false;
}
function videoSortBy(type: number) {}
function playlistSortBy(type: number) {}
</script>
<style lang="scss" scoped>
.right-drawer {
  height: 100%;
  width: 100%;
  .preview-label {
    font-size: 14px;
  }
  .video-container {
    width: 100%;
  }

  .translator-container {
    background-color: #242424;
    height: 62px;
  }
  .playlist-title {
    font-size: 16px;
  }
  .playlist-video-item {
    width: 100%;
    height: 80px;
    background-color: #242424;
    font-size: 12px;
    .video-title {
      max-width: 100%;
    }
  }
}
</style>
